<template>
	<view>
		<view class="headCoupon">
			<view class="headCouponTxt" @click="HeadCouponClick(1)">
				<text style="padding-bottom: 10rpx;" :style="HeadCoupon == 1?'border-bottom:1px solid #DFAE7E;':'border-bottom:1px solid #FFFFFF;'">未使用</text>
			</view>
			<view class="headCouponTxt" @click="HeadCouponClick(2)">
				<text style="padding-bottom: 10rpx;" :style="HeadCoupon == 2?'border-bottom:1px solid #DFAE7E;':'border-bottom:1px solid #FFFFFF;'">已使用</text>
			</view>
			<view class="headCouponTxt" @click="HeadCouponClick(3)">
				<text style="padding-bottom: 10rpx;" :style="HeadCoupon == 3?'border-bottom:1px solid #DFAE7E;':'border-bottom:1px solid #FFFFFF;'">已过期</text>
			</view>
		</view>
		<view>
			<ZWYHJ style="margin-top: 370rpx;"></ZWYHJ>
		</view>
		<view class="notCouponFooter">
			当前无可领优惠券
		</view>
	</view>
</template>

<script>
	import ZWYHJ from "../../components/ZWJL/ZWYHJ.vue"
	export default {
		components: {
			ZWYHJ
		},
		data() {
			return {
				HeadCoupon:1
			}
		},
		methods: {
			HeadCouponClick(index){
				this.HeadCoupon = index;
			}
			
		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
	.headCoupon{
		background: #FFFFFF;
		text-align: center;
	}
	.headCouponTxt{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #444444;
		line-height: 70rpx;
		display: inline-block;
		margin: 0 80rpx;	
	}
	.notCouponFooter{
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 90rpx;
		position: fixed;
		bottom: 0;
		text-align: center;
	}

</style>
